<template>
  <div class="constellation-detail">
    <nav-back />
    <div class="cons-view">
      <i class="cons-icon" :style="{backgroundImage:`url('${consIcon}')`}"></i>
      <span class="cons-name">{{consText}}</span>
    </div>
    <div
      v-for="(v,i) in consList"
      :key="i"
      class="detail-item"
    >
      <div class="title">
        <i class="icon" :style="{backgroundImage:`url('${v.icon}')`}"></i>
        <span class="text">{{v.title}}</span>
      </div>
      <div class="article">{{v.article}}</div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { NavBack } from '@/components'
import { getConsObj } from '@/tools'
import luck1 from '@/assets/icons/luck-1.png'
import luck2 from '@/assets/icons/luck-2.png'
import luck3 from '@/assets/icons/luck-3.png'
import luck4 from '@/assets/icons/luck-4.png'

const icons = [luck1, luck2, luck3, luck4]

export default {
  name: 'constellation-detail',
  components: { NavBack },
  computed: {
    ...mapState('User', ['conscode']),
    ...mapState('Home', ['luck']),
    consIcon() {
      return getConsObj(this.conscode).icon
    },
    consText() {
      return getConsObj(this.conscode).text
    },
    consList() {
      return this.luck.map((v, i) => ({ ...v, icon: icons[i] }))
    }
  }
}
</script>

<style lang="stylus">
$main-icon-size = 60px;
$luck-icon-size = 20px;

.constellation-detail {
  min-height: 100vh;
  background-color: #fff;

  .cons-icon {
    display: block;
    width: $main-icon-size;
    height: $main-icon-size;
    margin: 0 auto;
    background: center / cover no-repeat;
  }

  .cons-name {
    display: block;
    margin: 10px auto;
    text-align: center;
    font-size: 120%;
  }

  .detail-item {
    padding: 16px;

    .title {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }

    .icon {
      width: $luck-icon-size;
      height: $luck-icon-size;
      margin-right: 5px;
      background: center / cover no-repeat;
    }
  }
}
</style>
